<script setup lang="ts">
import {onMounted, ref, watch} from 'vue'
import { useAudioPlayerStore } from "@/stores"

const props = defineProps({
  themeDarkStyle: {
    required: false,
    default: false,
    type: Boolean
  }
})

const audioPlayer = useAudioPlayerStore()

const showDialog = ref(false)

const dialogRef = ref(null)

const voiceValue = ref(0)

const muted = ref(false)

const handelSetVoice = (e) => {
  //audioPlayer.voice =
  if(setVoiceRef.value !== null)
  {
    voiceValue.value = parseInt(e.target.value)
    audioPlayer.voice = parseInt(e.target.value)
  }
}

onMounted(()=>{
  voiceValue.value = audioPlayer.voice
  muted.value = audioPlayer.muted
})

const handelSetMute = () => {
  muted.value = !muted.value
  audioPlayer.setMuted(muted.value)
}



const setVoiceRef = ref<HTMLInputElement | null>(null)

function handleClickOutSide(e:any)
{
  if(dialogRef.value!==null)
  {
    if(!dialogRef.value.contains(e.target)){
      showDialog.value = false
      document.removeEventListener('click',handleClickOutSide)
    }
  }
}

watch(showDialog,(newValue) => {
  if (newValue)
  {
    setTimeout(() => {
      // 添加点击事件的监听器
      document.addEventListener('click', handleClickOutSide);
    }, 20);
  }
})

const handelDialogDisplay = () => {
  showDialog.value = !showDialog.value
}

</script>

<template>
  <div class="btn-voice">
    <div :class="muted || voiceValue === 0? themeDarkStyle? 'img_voice muted_dark': 'img_voice muted': themeDarkStyle? 'img_voice umuted_dark': 'img_voice umuted'"  @click="handelDialogDisplay">

    </div>
    <div ref="dialogRef" class="voice-dialog" v-show="showDialog">
      <input type="range" min="0" max="100" @input="handelSetVoice($event)" :value="voiceValue"  ref="setVoiceRef"/>
      <div class="voice-text">
        {{ voiceValue }}%
      </div>
      <div class="hr"></div>
      <div :class="muted || voiceValue === 0? 'mute muted': 'mute umuted'" @click="handelSetMute" >

      </div>
    </div>

  </div>



</template>

<style lang="scss" scoped>
.muted{
  //background: url(@/assets/qqimgs/voice_silence.svg) no-repeat center center;
  background: url(@/assets/res/bv_volume_mute.svg) no-repeat center center;
  &:hover{
    background: url(@/assets/res/bv_volume_mute_hover.svg) no-repeat center center;
  }
}

.umuted{
  background: url(@/assets/res/bv_volume.svg) no-repeat center center;
  //background: url(@/assets/qqimgs/voice_normal.svg) no-repeat center center;
  height: 26px;
  width: 26px;
  &:hover{
    background: url(@/assets/res/bv_volume_hover.svg) no-repeat center center;
  }
}

.muted_dark{
  background: url(@/assets/res/bv_volume_mute_white.svg) no-repeat center center;
  //background: url(@/assets/qqimgs/voice_silence--white.svg) no-repeat center center;
  &:hover{
    background: url(@/assets/res/bv_volume_mute_hover.svg) no-repeat center center;
  }
}

.umuted_dark{
  background: url(@/assets/res/bv_volume_white.svg) no-repeat center center;
  //background: url(@/assets/qqimgs/voice_normal--white.svg) no-repeat center center;
  height: 26px;
  width: 26px;
  &:hover{
    background: url(@/assets/res/bv_volume_hover.svg) no-repeat center center;
  }
}


.btn-voice{
  position: relative;
  .img_voice{
    height: 26px;
    width: 26px;

    &:hover{
      cursor: pointer;
    }
    &:active{
      transform: translate(1px,1px) ;
    }
  }

  .voice-dialog{
    position: absolute;
    top: -228px;
    left: -32px;
    width: 91px;
    height: 237px;
    background: url(@/assets/qqimgs/voice_dialog.png);

    input {
      transform: translate(-16px,75px) rotate(-90deg);
      position: absolute;
      height: 20px;
      width: 120px;
      appearance: none;
      -webkit-appearance: none;
      overflow: hidden;
      //-webkit-appearance: slider-vertical;

      &::-webkit-slider-runnable-track{
        -webkit-appearance: none;
        height: 3px;
        background-color: #ededed;
      }

      &::-webkit-slider-container{
        height: 20px;
      }

      &::-webkit-slider-thumb{
        appearance: none;
        -webkit-appearance: none;
        color: #1ecf9d;
        background-color: #1ecf9d;
        transform: translatey(-5px);
        height: 15px;
        width: 15px;
        border-radius: 50%;
        border: 1px solid transparent;
        border-image: linear-gradient(#1ecf9d,#1ecf9d) 0 fill / 8 15 7 0 / 3px 0 0 220px;
      }
    }

    .voice-text{
      position: absolute;
      top: 150px;
      left: 33px;
    }

    .hr{
      display: block;
      height: 1px;
      width: 72px;
      position: absolute;
      border-top: #ededed 1px solid;
      top: 175px;
      left: 10px;
    }

    .mute{
      position: absolute;
      height: 26px;
      width: 26px;
      top: 180px;
      left: 32px;

      &:hover{
        cursor: pointer;
      }
      &:active{
        transform: translate(1px,1px) ;
      }
    }
  }


}



</style>